<template>
  <div class="page-list-con" :style="getCollapseHeiStyle">
    <ul class="page-list-scroll">
      <li v-for="(page, index) in currentPages" :key="page.id" class="page-list">
        <div class="page-con" @click.stop="onPageItem(page, index)"  @mouseenter="onHover(page)" @mouseleave="onOut(page)">
          <div class="page-number" :class="page.isActive ? 'page-active' : ''"><span>{{index + 1}}</span></div>
          <div class="page-thumbnail" :class="page.isActive ? 'page-active' : ''" :id="'page-' + index" :style="selectedPageStyles(page)">
            <div class="page-thumbnail-style" :style="scaleSitePageStyles(page)">
              <group-component :style="getPageStyles(page)" :item="page" :pageId="-1" :popId="-1"></group-component>
              <div class="thumbnail-mask"></div>
            </div>
          </div>
          <div class="page-btns-con">
            <div v-show="state.isDisplayBtns" class="page-btns">
              <i class="jy-icon-copy" @click.stop="onCopyPage($event, page.id)"></i>
              <i class="jy-icon-delete" @click.stop="onDeletePage($event, page.id)"></i>
              <el-icon @click.stop="onMoveTop(index)"><top /></el-icon>
            </div>
          </div>
        </div>
        <div class="mask" :style="thumbnailPageHeight(page)"></div>
      </li>
    </ul>
    <div class="page-confirm-con">
      <el-dialog title="提示" :show-close="false" v-model="state.isDeletePage" width="30%">
        <template #title>
          <span class="el-dialog__title">提示</span>
          <button type="button" class="el-dialog__headerbtn"  @click.stop="onClose(false)">
            <i class="el-dialog__close jy-icon-layer-closed"></i>
          </button>
        </template>
        <div>您确定要删除该页面吗？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" @click.stop="onClose(false)">取消</el-button>
            <el-button type="warning" class="orange-bg-color" @click.stop="onClose(true)">删除</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div class="page-list-slider" :class="{'page-list-slider-active': state.bIsSliderOver || state.bIsSliderGet}"
      @mouseover="handleSliderMOver"
      @mouseout="handleSliderMOut"
      @mousedown="handleSliderMDown">
    </div>
  </div>
</template>

<script setup lang="ts">
import { PAGE_TYPE_ } from '@/const/web/'
import { bgPositionStyle, getPxOVwByValue } from '@/utils'
import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useSiteStore } from '@/store/site'
const THUMBNAIL_WIDTH = 120
const props = defineProps<{ 
  type: number,
}>()

const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const siteAttrs = useWebSite.attrs

const state =  reactive({
  isDisplayBtns: false,
  isDeletePage: false,
  bIsSliderGet: false,
  bIsSliderOver: false,
})
const state_ = {
  collapseHei: 0,
  deletePageId: '',
  mouseY: Infinity,  // mouse y position
  defaultCollapseHei: 0,  // collapseHei default value
}
const getCollapseHeiStyle = computed(() => {
  return {
    height: getPxOVwByValue(state_.collapseHei),
  }
})
const siteStyles = () => {
  const styles_: any = {}
  if(siteAttrs.bgUrl) {
    styles_.backgroundImage = 'url(' + siteAttrs.bgUrl + ')'
  } else {
    styles_.backgroundColor = siteAttrs.backgroundColor
  }
  return styles_
}
const getPageId = (pageId: number) => {
  if(props.type == PAGE_TYPE_.page) {
    return pageId
  } else {
    return -1
  }
}
const getPopId = (popId: number) => {
if(props.type == PAGE_TYPE_.page) {
    return -1
  } else {
    return popId
  }
}
const currentPages = computed(() => {
  if(props.type == PAGE_TYPE_.page) {
    return useWebSite.getH5Pages
  } else {
    return useWebSite.getPopPages
  }
})

const selectedPageStyles = (page: IPage) => {
  return {
    width: thumbnailPageWidth(page),
    height: thumbnailPageHeight(page),
  }
}
const getPageStyles = (page: IPage) => {
  const pageStyles_ =  {
    backgroundColor: page.attrs.backgroundColor,
    backgroundImage: 'url(' + page.attrs.bgUrl + ')',
    width: getPxOVwByValue(page.attrs.width),
    height: getPxOVwByValue(page.attrs.height),
  }
  bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType)
  return pageStyles_
}  
const scaleSitePageStyles = (page: IPage) => {
  let styles_: any = getPageStyles(page)
  if(page.type == PAGE_TYPE_.pop){
    //
  } else {
    _.merge(styles_, siteStyles())
  }
  styles_.transform = 'scale(' + THUMBNAIL_WIDTH/page.attrs.width + ')'
  return styles_
}
const thumbnailPageHeight = (page: IPage) => {
  return getPxOVwByValue(Math.round(page.attrs.height*(THUMBNAIL_WIDTH/page.attrs.width)) + 8)
}
const thumbnailPageWidth = (page: IPage) => {
  return getPxOVwByValue(Math.round(page.attrs.width*(THUMBNAIL_WIDTH/page.attrs.width)) + 8)
}
const onHover = (page: IPage) => {
  state.isDisplayBtns = !state.isDisplayBtns
  // if(state.isDisplayBtns != state.isDisplayBtns) {
    // useWebPage.updatePageAttrsById({ attrs: page.attrs, id: page.id });
  // }
}
const onOut = (page: IPage) => {
  state.isDisplayBtns = false
  // if(page.attrs.isDisplayBtns != this.attrs.isDisplayBtns){
  //   this.updatePageAttrsById({ attrs: this.attrs, id: page.id });
  // }
}
const onPageItem = (page: IPage, index: number) => {
  useWebPage.setActivePage(page)
  let pageIndex = -1
  let popIndex = -1
  if(props.type == PAGE_TYPE_.page) {
    pageIndex = index
  } else {
    popIndex = index
  }
  // nextTick(() => {
  //   this.$forceUpdate()
  // })
}
const onAddPage = (e: any, type: number) => {
  e.stopPropagation()
  e.preventDefault();
  //是页面还是弹出层1 页面 2 弹出层
  useWebSite.addPage(type)
}
const onDeletePage = (e: any, id: string) => {
  e.stopPropagation()
  e.preventDefault()
  state_.deletePageId = id
  state.isDeletePage = true
}
const onClose = (isDelete: boolean) => {
  if(isDelete){
    const pageId = state_.deletePageId
    useWebSite.deletePage(pageId)
  }
  state.isDeletePage = false
}
const onCopyPage = (e: any, id: string) => {
  e.stopPropagation()
  e.preventDefault()
  useWebPage.copyPage(id)
}
const onMoveTop = (pageIndex: number) => {
  if(pageIndex > 0){
    useWebPage.movePageIndex({ type: props.type, pageIndex })
  }
}
const handleSliderMOver = () => {
  state.bIsSliderOver = true
}
const handleSliderMOut = () => {
  state.bIsSliderOver = false
}
const handleSliderMMove = (e: any) => {
  if(state.bIsSliderGet) {
    if(isNaN(state_.mouseY) || state_.mouseY === Infinity) state_.mouseY = e.y
    const lastMouseY = state_.mouseY
    state_.mouseY = e.y
    const deltaMouseY = state_.mouseY - lastMouseY
    if(deltaMouseY >= 0) {
      state_.collapseHei += deltaMouseY
      if(state_.collapseHei > state_.defaultCollapseHei) state_.collapseHei = state_.defaultCollapseHei
    }
    if(deltaMouseY < 0) {
      state_.collapseHei += deltaMouseY
      if(state_.collapseHei <= 0) state_.collapseHei = 0
    }
  }
}
const handleSliderMDown = () => {
  state.bIsSliderGet = true
}
const handleSliderMUp = () => {
  state.bIsSliderGet = false
  resetMouseParams()
}
const resetMouseParams = () => {
  state_.mouseY = Infinity
}

const initComp = () => {
  state_.collapseHei = window.innerHeight - 60 - 56  // index-header + el-collapse-head*2 + right-timelime
  state_.defaultCollapseHei = window.innerHeight - 60 - 56

  window.addEventListener('mouseup', handleSliderMUp, false)
  window.addEventListener('mousemove', handleSliderMMove, false)
}
initComp()

onBeforeUnmount(() => {
  window.removeEventListener('mouseup', handleSliderMUp, false)
  window.removeEventListener('mousemove', handleSliderMMove, false)
})
</script>

<style lang="scss" scoped>
  .page-list-con{
    border-bottom: solid 1px #EDEFF2;
    border-radius: 5px;
    // box-shadow: 0 10px transparent inset,0 -10px 20px rgba(237, 239, 242, .75) inset, -10px 0 transparent inset, 10px 0 transparent inset;
  }
  .page-list-slider{
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 100%;
    cursor: row-resize;
  }
  .page-list-slider-active{
    background-color: red;
    border-top: solid 1px red;
    border-bottom: solid 1px red;
  }
</style>
